<template>
  <scroll-view scroll-y="ture" style="height: 100vh">
    <view
      class="rule_icon icon_btn"
      @click.stop="openRule"
      :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/rule_btn.png')})`,
          }"
    ></view>
    <view
      class="prize_icon icon_btn"
      :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/prize_btn.png')})`,
          }"
      @click.stop="toPrize"
    >
    </view>
    <template v-if="activityStatus === '活动中'">
      <view
        class="ultraman-container"
        :style="{
          backgroundImage: `url(${oss2('others/2023Q4Code/Q4_bg.png')})`,
        }"
      >

        <view
          class="index_title"
          :style="{
            backgroundImage: `url(${oss2(
              'others/2023Q4Code/index_title.png'
            )})`,
          }"
        ></view>
        <view
          class="index_pic"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/index_pic.png')})`,
          }"
        >
          <view
            class="index_pic_gif"
            :style="{
              backgroundImage: `url(${oss2('others/2023Q4Code/scan.gif')})`,
            }"
          ></view>
        </view>

        <view
          class="code_btn index_btn"
          @click.stop="toScanCode"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/btn_toScan.png')})`,
          }"
        ></view>
        <view
          class="buy_btn index_btn"
          @click.stop="toPurchase"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/btn_toBuy.png')})`,
          }"
        ></view>

        <view class="code_hint flex items-center justify-center">
          二维码无法识别？试试
          <view class="text_link" @click.stop="toInput">手动核销</view>
        </view>
        <view class="agree flex items-center justify-center">
          <view class="i-agree" @click.stop="doAgree">
            <image v-if="iAgree" :src="oss2('others/ultraman/choose.png')" />
          </view>
          <view class="agree-content items-center">
            已阅读并同意
            <view class="text_link" @click.stop="openRule2">活动规则</view>
            和
            <view class="text_link" @click.stop="openPolicy">隐私声明</view>
          </view>
        </view>
      </view>
    </template>

    <template v-else>
      <view
        class="ultraman-container puzzle"
        :class="{ 'end-page': activityStatus === '已结束' }"
        :style="{
          backgroundImage: `url(${
            activityStatus === '未开始'
              ? oss2('others/2023Q4Code/Pic_wait.png')
              : activityStatus === '已结束'
              ? oss2('others/2023Q4Code/Pic_end.png')
              : oss2('others/2023Q4Code/Pic_fm.png')
          })`,
        }"
      >
        <view
          class="loading_gif"
          :style="{
            backgroundImage: `url(${oss2(
              'others/2023Q4Code/loading_gif.gif'
            )})`,
          }"
        >
        </view>
        <view
          class="backHomeBtn"
          @click.stop="backHome"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/btn_back.png')})`,
          }"
        ></view>
      </view>
    </template>

    <!-- 弹窗 -->
    <view class="mode" v-if="showDialog">
      <view
        class="Dialog_body w-295px h-246px top-21vh left-41px"
        :style="{
          backgroundImage: `url(${oss2('others/2023Q4Code/' + dialogBg)})`,
        }"
      >
        <view
          class="Dialog_close top-18px right-21px"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/close_icon.png')})`,
          }"
          @click.stop="dialogClose"
        ></view>
        <view
          class="Dialog_back w-112px h-36px bottom-48px left-91px"
          @click.stop="dialogBack"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/back_icon.png')})`,
          }"
        ></view>
        <view class="Dialog_text">
          有任何问题请拨打客服热线
          <button class="number" @click="PhoneCall">400-0880-325</button>
        </view>
      </view>
    </view>

    <!-- 购买弹窗 -->
    <view class="mode" v-if="buyDialog">
      <view
        class="Dialog_body w-295px h-299px top-21vh left-41px"
        :style="{
          backgroundImage: `url(${oss2('others/2023Q4Code/TC_pic.png')})`,
        }"
      >
        <view
          class="Dialog_close top-13px right-13px"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/close_icon.png')})`,
          }"
          @click.stop="buyClose"
        ></view>
        <view
          class="Dialog_back w-232px h-38px bottom-87px left-31px"
          @click.stop="toBuy"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/go_buy.png')})`,
          }"
        ></view>
        <view
          class="Dialog_back w-232px h-38px bottom-37px left-31px"
          @click.stop="getLocationInfo"
          :style="{
            backgroundImage: `url(${oss2('others/2023Q4Code/go_shop.png')})`,
          }"
        ></view>
      </view>
    </view>

    <!-- 活动规则弹窗 -->
    <rule-popup
      v-if="showRule"
      :ruleType="ruleType"
      @closekf="kefuShow = false"
      @openkf="openkfBtn"
      @close="closeRule"
    />

    <view
      class="mode top-mode"
      v-if="kefuShow"
      style="color: #0f2989"
      @cancel="kefuShow = false"
      cancel-text="取消"
    >
      <view class="bottom_div">
        <button class="phoneStyle" @click="PhoneCall">400-0880-325</button>
        <button open-type="contact" @click="onlineKf" class="kefu_btn">
          在线客服
        </button>
        <button class="phoneStyle" @click="closeKefu">取消</button>
      </view>
    </view>
  </scroll-view>

  <!-- <privacyPopup @agreePrivacy="agreePrivacy"></privacyPopup> -->
</template>

<script setup>
import {
  onLoad,
  onShow,
  onUnload,
  onHide,
  onShareAppMessage,
} from "@dcloudio/uni-app";
import { ref } from "vue";
import { oss2, message, debounce, generateSign2 } from "@/utils/utils";
import RulePopup from "@/components/Q4-popup.vue";
import { userLogin } from "@/services/utils";
// import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";
let scanStauts = {
  4001: { img: "code_wait.png", close: "error_unactive", back: "error_back2" },
  4002: { img: "code_past.png", close: "error_redeemed", back: "error_back3" },
  4000: {
    img: "code_err.png",
    close: "error_QRcode",
    back: "error_back1",
  },
  'err': {
    img: "hostname_err.png",
    close: "error_QRcode",
    back: "error_back1",
  },
};
let emdlzMap = {
  活动中: {
    name: "q4_onecodecampaign_landing_page",
    page: "landing_page",
    back: "",
  },
  未开始: {
    name: "q4_onecodecampaign_unstart_page",
    page: "unstart_page",
    back: "back_universal",
  },
  已结束: {
    name: "q4_onecodecampaign_end_page",
    page: "back_universal2",
    back: "back_universal2",
  },
  繁忙: {
    name: "q4_onecodecampaign_busy_page",
    page: "busy_page",
    back: "back_universal1",
  },
};

const activityStatus = ref("活动中");
const iAgree = ref(false);
const locationInfo = ref({ latitude: "", longitude: "" });

const showRule = ref(false);
const kefuShow = ref(false);
const ruleType = ref("");

const memberId = ref("");
const code = ref("");
const showDialog = ref(false);
const dialogCode = ref(0);
const dialogBg = ref("");

const buyDialog = ref(false);

onLoad(async (query) => {

  if (new Date().getTime() > new Date('2024/5/31 23:59:59').getTime()) {
    activityStatus.value = '已结束'
  }

  if (!['未开始'].includes(activityStatus.value)) {
    uni.login({
      provider: "weixin",
      success: async (res) => {

        const loginParam = { type: 1 };
        loginParam.code = res.code;

        const { data } = await userLogin(loginParam);
        console.log(data)
        uni.setStorageSync("OPENID", data?.openId);
        uni.setStorageSync("UNIONID", data?.unionId);
        uni.setStorageSync("TOKEN", data?.accessToken);
        getApp().emdlz2("set", "user", "openid", data.openId);
        getApp().emdlz2("set", "user", "unionId", data.unionId);
        getApp().getUserInfo();

        const pages = getCurrentPages();
        const beforePage = pages[pages.length - 2]?.route ?? "";
        if (
          beforePage !== "pages/home/home" &&
          beforePage !== "pages/2023oreocore/index" &&
          new Date().getTime() < new Date('2024/5/31 23:59:59')
        ) {
          console.log("--------------扫码进入", query.q);
          const codeValue = decodeURIComponent(
            query.q ? query.q : uni.getLaunchOptionsSync().query.q
          );
          code.value = codeValue.split("/")[codeValue.split("/").length - 1];

          if (code.value !== "undefined") {
            console.log("-----------code", code.value);
            haveCode();
          } else {
            uni.setStorageSync("SCENE", "KJ5Z7WDYR6B3QXVNAQIMQUMNU8");
          }
        }
        // 从会员页返回
        if (beforePage === "pages/2023oreocore/index" && query.code) {
          console.log("===========返回携带code", query.code);
          code.value = query.code;
          uni.getLocation({
            type: "gcj02",
            success(res) {
              locationInfo.value.latitude = res.latitude;
              locationInfo.value.longitude = res.longitude;
            },
            complete() {
              const body = {
                userValue: uni.getStorageSync("OPENID"),
                qrCode: code.value,
                source: "Q4",
                timestamp: Date.parse(new Date()),
                lng: locationInfo.value.longitude,
                lat: locationInfo.value.latitude,
              };
              scanCodeIn(body);
            },
          });
        }
      },
    });
  }
});

onShow(() => {

  if (new Date().getTime() > new Date('2024/5/31 23:59:59').getTime()) {
    activityStatus.value = '已结束'
  }

  // 用户进入时间
  enterTime = new Date();

  getApp().accessLogAdd();
  if (uni.getStorageSync("Q4AGREE")) {
    iAgree.value = uni.getStorageSync("Q4AGREE");
  }
});
onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    emdlzMap[activityStatus.value].name,
    "view",
    emdlzMap[activityStatus.value].page,
    stayTime
  );
});
onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    emdlzMap[activityStatus.value].name,
    "view",
    emdlzMap[activityStatus.value].page,
    stayTime
  );
});

const linkTo = (url) => uni.navigateTo({ url });

const backHome = () => {
  getApp().emdlz2(
    "track",
    "event",
    emdlzMap[activityStatus.value].name,
    "click",
    emdlzMap[activityStatus.value].back,
    ""
  );
  uni.switchTab({
    url: "/pages/home/home",
  });
};

// const agreePrivacy = () => {
//   console.log("=========同意隐私授权");
//   if (code.value !== "undefined" && code.value !== "") {
//     console.log("=========", code.value);
//     isLogin();
//   }
// };
const haveCode = () => {
  isLogin();
};
const isLogin = () => {
  if (
    getApp().globalData.user.phone === null ||
    getApp().globalData.user.phone === ""
  ) {
    uni.navigateTo({
      url: "/pages/vip/register?tag=Q4&from=index&code=" + code.value,
    });
    return;
  }

  uni.getLocation({
    type: "gcj02",
    success(res) {
      locationInfo.value.latitude = res.latitude;
      locationInfo.value.longitude = res.longitude;
    },
    fail(err) {},
    complete() {
      const body = {
        userValue: uni.getStorageSync("OPENID"),
        qrCode: code.value,
        source: "Q4",
        timestamp: Date.parse(new Date()),
        lng: locationInfo.value.longitude,
        lat: locationInfo.value.latitude,
      };
      scanCodeIn(body);
    },
  });
};

const scanCodeIn = debounce(
  async (body) => {
    uni.request({
      url: `${process.env.Q4_URL}/zex-qr/api/qr/validation`,
      method: "get",
      data: {
        ...body,
        ...{ sign: generateSign2(body) },
      },

      success: async (requestRes) => {
        getApp()
          .getUserInfo()
          .then((user) => {
            memberId.value = user.memberScore.memberId;
            if (requestRes.data.code === 200) {
              linkTo(
                `/campaign/pages/oreoQ4/webview?source=index&accesstoken=${uni.getStorageSync(
                  "TOKEN"
                )}&code=${code.value}&openid=${uni.getStorageSync(
                  "OPENID"
                )}&unionid=${uni.getStorageSync("UNIONID")}&memberid=${
                  user.memberScore.memberId
                }&agree=${uni.getStorageSync("Q4AGREE")}&latitude=${
                  locationInfo.value.latitude ? locationInfo.value.latitude : ""
                }&longitude=${
                  locationInfo.value.longitude
                    ? locationInfo.value.longitude
                    : ""
                }`
              );
              code.value = "";
            } else if ([4000].includes(requestRes.data.code)) {
              code.value = "";
              dialogCode.value = 4000;
              dialogBg.value = scanStauts[4000].img;
              showDialog.value = true;
            } else if ([4001].includes(requestRes.data.code)) {
              code.value = "";
              dialogCode.value = 4001;
              dialogBg.value = scanStauts[4001].img;
              showDialog.value = true;
            } else if ([4002].includes(requestRes.data.code)) {
              code.value = "";
              dialogCode.value = 4002;
              dialogBg.value = scanStauts[4002].img;
              showDialog.value = true;
            } else {
              if ([400].includes(requestRes.data.status)) {
                code.value = "";
                dialogCode.value = 4000;
                dialogBg.value = scanStauts[4000].img;
                showDialog.value = true;
                return;
              }
              code.value = "";
              uni.showToast({
                title: requestRes.data.message,
                icon: "none",
                duration: 2000,
              });
            }
          });
      },
      fail(requestErr) {
        code.value = "";
        uni.showToast({
          title: requestErr.data.message,
          icon: "none",
          duration: 2000,
        });
      },
    });
  },
  500,
  false
);

const toScanCode = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "go_scan",
    ""
  );

  // if (!iAgree.value) return message("请先同意相关协议!");

  uni.scanCode({
    scanType: ["qrCode"],
    success: async (res) => {
      console.log("res-----------------", res);
      code.value = res.result.split("/")[res.result.split("/").length - 1];
      // 域名判断不对处理
      const hostnameArr = process.env.Q4_URL.split('.')
      hostnameArr.shift()
      if (res.result.includes(hostnameArr.join('.')) && !res.result.includes(process.env.Q4_URL)) {
        code.value = "";
        dialogCode.value = 'err';
        dialogBg.value = scanStauts['err'].img;
        showDialog.value = true;
        return
      }
      // 判断会员
      if (
        getApp().globalData.user.phone === null ||
        getApp().globalData.user.phone === ""
      ) {
        uni.navigateTo({
          url: "/pages/vip/register?tag=Q4&from=index&code=" + code.value,
        });
        return;
      }

      uni.getLocation({
        type: "gcj02",
        success(res) {
          locationInfo.value.latitude = res.latitude;
          locationInfo.value.longitude = res.longitude;
        },
        complete() {
          const body = {
            userValue: uni.getStorageSync("OPENID"),
            qrCode: code.value,
            source: "Q4",
            timestamp: Date.parse(new Date()),
            lng: locationInfo.value.longitude,
            lat: locationInfo.value.latitude,
          };
          scanCodeIn(body);
        },
      });
    },
    fail(err) {
      console.log(err);
    },
  });
};

const toPurchase = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "no_product",
    ""
  );

  buyDialog.value = true;
};
const toBuy = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "purchase_more",
    ""
  );

  uni.navigateTo({
    url: "/pages/goods/goods?id=703965fe7f9fe4ee592f74b70c354a63",
  });
};
const getLocationInfo = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "find_more",
    ""
  );

  uni.getLocation({
    type: "gcj02",
    success(res) {
      locationInfo.value.latitude = res.latitude;
      locationInfo.value.longitude = res.longitude;
      uni.navigateTo({
        url: "/campaign/pages/oreoQ4/storeList",
      });
    },
    fail(err) {
      uni.getSetting({
        success: (res) => {
          if (
            typeof res.authSetting["scope.userLocation"] != "undefined" &&
            !res.authSetting["scope.userLocation"]
          ) {
            wx.showModal({
              title: "提示",
              content: "当前位置信息未开启，开启后可查看附近门店信息",
              success: (res) => {
                if (res.confirm) {
                  //打开设置 让用户点击允许 这样可以重新获取
                  wx.openSetting({
                    success: (res) => {
                      if (res.authSetting["scope.userLocation"]) {
                        // 授权成功，重新定位即可
                        wx.getLocation({
                          type: "gcj02",
                          altitude: true,
                          isHighAccuracy: true,
                          success: (res) => {
                            locationInfo.value.latitude = res.latitude;
                            locationInfo.value.longitude = res.longitude;
                          },
                          fail: (err) => {
                            console.log(err);
                          },
                        });
                      } else {
                        // 没有允许定位权限
                        wx.showToast({
                          title: "没有允许定位权限",
                          icon: "none",
                        });
                      }
                    },
                  });
                }
              },
            });
          }
        },
      });
      buyDialog.value = false;
    },
  });
};
const toInput = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "go_redeem",
    ""
  );

  // if (!iAgree.value) return message("请先同意相关协议!");
  linkTo("/campaign/pages/oreoQ4/scanCodeInput");
};
const toPrize = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "check_records",
    ""
  );

  // if (!iAgree.value) return message("请先同意相关协议!");
  linkTo(
    `/campaign/pages/oreoQ4/webview?source=record&accesstoken=${uni.getStorageSync(
      "TOKEN"
    )}&openid=${uni.getStorageSync("OPENID")}&unionid=${uni.getStorageSync(
      "UNIONID"
    )}&memberid=${
      getApp().globalData.user.memberScore.memberId
        ? getApp().globalData.user.memberScore.memberId
        : memberId.value
    }&agree=${uni.getStorageSync("Q4AGREE")}&latitude=${
      locationInfo.value.latitude ? locationInfo.value.latitude : ""
    }&longitude=${
      locationInfo.value.longitude ? locationInfo.value.longitude : ""
    }`
  );
};

const doAgree = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "agree_policy",
    ""
  );

  iAgree.value = !iAgree.value;
  uni.setStorageSync("Q4AGREE", iAgree.value);
};
const openRule = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "check_rules",
    ""
  );

  ruleType.value = "rule";
  showRule.value = true;
};

const PhoneCall = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "call_contect",
    ""
  );

  uni.makePhoneCall({
    phoneNumber: "400-0880-325",
  });
};
const onlineKf = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "contect_onlinecs",
    ""
  );
};
const openkfBtn = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "contect_cs",
    ""
  );

  kefuShow.value = true;
};
const closeKefu = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "close_tips",
    ""
  );
  kefuShow.value = false;
};
const closeRule = () => {
  if (ruleType.value == "rule") {
    getApp().emdlz2(
      "track",
      "event",
      "q4_onecodecampaign_landing_page",
      "click",
      "close_rules",
      ""
    );
  } else {
    getApp().emdlz2(
      "track",
      "event",
      "q4_onecodecampaign_landing_page",
      "click",
      "close_policy",
      ""
    );
  }

  showRule.value = false;
};
const openRule2 = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "check_rules1",
    ""
  );

  ruleType.value = "rule";
  showRule.value = true;
};
const openPolicy = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "check_policy",
    ""
  );
  ruleType.value = "pravocy";
  showRule.value = true;
};
const buyClose = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    "close_tips1",
    ""
  );

  buyDialog.value = false;
};
const dialogClose = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    scanStauts[dialogCode.value].close,
    ""
  );
  showDialog.value = false;
};
const dialogBack = () => {
  getApp().emdlz2(
    "track",
    "event",
    "q4_onecodecampaign_landing_page",
    "click",
    scanStauts[dialogCode.value].back,
    ""
  );
  showDialog.value = false;
};

onShareAppMessage((e) => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  console.log("currentPage", currentPage);
  const pageUrl = "/" + currentPage.route;

  const shareObj = {
    title: "一起参加现金红包抽奖活动", // 默认是小程序的名称(可以写slogan等)
    path: pageUrl + `?from=pubid:shareback;aid:sq4sharecard`, // 默认是当前页面，必须是以‘/’开头的完整路径
    imageUrl: oss2("others/2023Q4Code/Q4share.jpg"), //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: (res) => {
      // 转发成功之后的回调
      if (res.errMsg == "shareAppMessage:ok") {
      }
    },
    fail: (err) => {
      // 转发失败之后的回调
      console.log("转发失败之后的回调", err);
      if (res.errMsg == "shareAppMessage:fail cancel") {
        // 用户取消转发
        console.log("用户取消转发");
      } else if (res.errMsg == "shareAppMessage:fail") {
        // 转发失败，其中 detail message 为详细失败信息
        console.log("转发失败，其中detail message 为详细失败信息");
      }
    },
    complete: () => {
      // 转发结束之后的回调（转发成不成功都会执行）
      console.log("转发结束之后的回调（转发成不成功都会执行）");
    },
  };
  console.log(shareObj);
  return shareObj;
});
</script>

    <style>
page {
  background-color: #08204e !important;
}
</style>
    <style lang="less" scoped>
@import "@/static/css/theme.less";

.puzzle {
  height: 1448rpx !important;
}
.icon_btn {
  width: 79px;
  height: 31px;
  position: absolute;
  right: 0;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 79px 100%;
  z-index: 1;
}
.rule_icon {
  top: 32px;
}
.prize_icon {
  top: 68px;
}
.ultraman-container {
  position: relative;
  width: 100%;
  min-height: 812px;
  height: 100vh;
  background-color: #08204e;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 812px;
  &.end-page {
    background-position: 0 -60px;
    min-height: 100vh;
    .loading_gif {
      background-position: 0 -96px;
    }
  }

  .index_title {
    width: 375px;
    height: 259px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 100%;
    position: absolute;
    top: 24px;
    left: 0;
  }
  .index_pic {
    width: 375px;
    min-height: 456px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 456px;
    position: absolute;
    top: 259px;
    left: 0;
    .index_pic_gif {
      width: 375px;
      min-height: 456px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 375px 456px;
      position: absolute;
      top: -50px;
      left: 0;
    }
  }

  .index_btn {
    width: 208px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 208px 100%;
    position: absolute;
    left: 84px;
    z-index: 1;
  }
  .code_btn {
    top: 542px;
  }
  .buy_btn {
    top: 593px;
  }

  .loading_gif {
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 375px 812px;
  }
  .backHomeBtn {
    position: absolute;
    bottom: 58px;
    left: 84px;
    width: 207px;
    height: 69px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 207px 100%;
  }
  .code_hint {
    width: 100%;
    height: 11px;
    font-size: 10px;
    font-weight: 400;
    font-family: FZCuYuan-M03S;
    color: #ffffff;
    text-shadow: 0px 0px 7px #03125f;
    position: absolute;
    left: 0;
    top: 670px;
  }
  .agree {
    width: 100%;
    font-size: 10px;
    font-family: FZLTHJW;
    color: #fff;
    box-sizing: border-box;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 692px;

    .agree-content {
      display: flex;
      word-break: break-all;
    }

    .i-agree {
      position: relative;
      width: 12px;
      height: 12px;
      background-color: transparent;
      margin-right: 10px;
      box-sizing: border-box;
      border: 2px solid #fff;
      image {
        position: absolute;
        top: -2px;
        left: 0;
        width: 12px;
        height: 12px;
      }
    }
  }
  .text_link {
    margin: 0 2px;
    color: #3fcbff;
    text-decoration: underline;
  }
}

.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  background-color: rgba(10, 28, 108, 0.7);

  .Dialog_body {
    position: absolute;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
    .Dialog_close {
      position: absolute;
      width: 36px;
      height: 36px;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100% 100%;
    }
    .Dialog_back {
      position: absolute;
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 100% 100%;
    }
    .Dialog_text {
      position: absolute;
      bottom: 18px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 10px;
      line-height: 10px;
      font-size: 10px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #0041c0;
      .number {
        width: 74px;
        background-color: transparent;
        margin: 0;
        padding: 0;
        line-height: 24px;
        font-size: 9px;
        color: #06bbf6;
        &::after {
          border: none;
        }
      }
    }
  }
}
.top-mode {
  z-index: 100 !important;
}

.bottom_div {
  width: 375px;
  height: 288rpx;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.phoneStyle {
  font-size: 12px;
  color: #2c82d0;
  width: 343.5px;
  padding: 0 !important;
  line-height: 36px !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  background: none !important;
  border-bottom: solid 1px #eaeaea;
  &::after {
    border: none;
  }
}
.kefu_btn {
  font-size: 12px;
  color: #0f2989;
  width: 343.5px;
  line-height: 36px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border-bottom: solid 1px #eaeaea;
  &::after {
    border: none;
  }
}
</style>
